<template>
  <div>
    <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '15px' }">
      <a-card title="cpu使用率" :bordered="false" :headStyle="{ padding: '0 15px', border:0}" style="width:100%">
        <ve-line
          ref="userCount"
          :data="cpuData"
          :settings="hourSettings"
          :extend="cpuExtend"
          :colors="hourcolors"
          :judge-width="true"
          height="200px">
        </ve-line>
      </a-card>
    </a-col>
    <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '15px' }">
      <a-card title="内存使用率" :bordered="false" :headStyle="{ padding: '0 15px', border:0}" style="width:100%">
        <ve-line
          :data="memoryData"
          :settings="memorySettings"
          :extend="chartExtend"
          :colors="hourcolors"
          :judge-width="true"
          height="200px">
        </ve-line>
      </a-card>
    </a-col>
    <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '15px' }">
      <a-card title="磁盘使用率" :bordered="false" :headStyle="{ padding: '0 15px', border:0}" style="width:100%">
        <ve-line
          :data="diskUsageData"
          :settings="memorySettings"
          :extend="chartExtend"
          :colors="hourcolors"
          :judge-width="true"
          height="200px">
        </ve-line>
      </a-card>
    </a-col>
  </div>
</template>

<script>
// import { getMcaCount } from '@/api/performance'
import moment from 'moment'
export default {
  name: 'UsageCount',
  components: {
  },
  data () {
    return {
      hourcolors: ['#4688f1', '#759574', '#ecac6c'],
      hourSettings: {
        yAxisType: ['percent'],
        area: true
      },
      memorySettings: {
        // yAxisType: ['KMB']
        // xAxisType: 'time'
      },
      cpuExtend: {
        title: {
          // text: '每日用户数',
          x: 'left',
          y: '-5px',
          textStyle: {
            fontSize: 13,
            fontWeight: 'bolder',
            color: '#333'// 主标题文字颜色
          }
        },
        dataZoom: [
          {
            type: 'inside'// inside表示内置的鼠标缩放滑动
          }
        ],
        grid: {
          top: '15%',
          left: '1%',
          right: '3%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          axisLine: {
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        series: {
          barWidth: 10,
          symbolSize: 3, // 拐点节点大小
          showSymbol: false // 是否默认显示拐点
          // symbol: 'none',
        }
      },
      chartExtend: {
        title: {
          // text: '每日用户数',
          x: 'left',
          y: '-5px',
          textStyle: {
            fontSize: 13,
            fontWeight: 'bolder',
            color: '#333'// 主标题文字颜色
          }
        },
        dataZoom: [
          {
            type: 'inside'// inside表示内置的鼠标缩放滑动
          }
        ],
        grid: {
          top: '15%',
          left: '1%',
          right: '3%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          axisLine: {
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            // formatter: '{value} MB'
            formatter: function (params) {
              const unitResult = (params / 1024) >= 1 ? (params / 1024).toFixed(2) + 'GB' : (params / 1024) < 1 ? params + 'MB' : 0
              return unitResult
            }
          },
          axisPointer: {
              snap: true
          }
        },
        series: {
          barWidth: 10,
          symbolSize: 3, // 拐点节点大小
          showSymbol: false // 是否默认显示拐点
          // symbol: 'none',
        }
      },
      cpuData: {
        columns: ['日期', 'cpu使用率'],
        rows: [
          // { '日期': '2021-01-10 12:00:00', '交易量': 421 }
        ]
      },
      memoryData: {
        columns: ['时间', '总内存', '已使用'],
        rows: []
      },
      diskUsageData: {
        columns: ['时间', '磁盘总量', '空间磁盘'],
        rows: []
      }
    }
  },
  created () {
    this.getCpuData()
    this.getTendencyData()
    this.getDiskUsageData()
  },
  mounted () {
    // 轮询接口
    const timers = window.setInterval(() => {
      setTimeout(res => {
      }, 0)// 利用定时器清除setInterval的每次叠加
    }, 60000)// 1分钟执行一次
    // this.once在离开当前路由时销毁定时器
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timers)
    })
  },
  /**
   * 数字格式化为千分位
   */
  filters: {
    format: function (value) {
      return value.toLocaleString()
    }
  },
  methods: {
    /**
     * 最近3小时交易量趋势
     */
    getCpuData () {
      // 生产当月的开始日期
      const startDate = moment().month(moment().month()).startOf('month').valueOf()
      const endDate = moment().month(moment().month()).endOf('month').valueOf()
      for (let i = 0; i < 400; i += 1) {
        this.cpuData.rows.push({
          '日期': moment.utc(this.randomDate(startDate, endDate)).format('YYYY-MM-DD HH:mm:ss'),
          'cpu使用率': Math.random()
        })
      }
      this.cpuData.rows.sort(function (a, b) {
          return Date.parse(a[ '日期' ]) - Date.parse(b[ '日期' ]) // 时间正序
      })
    },
    /**
     * 最近3小时交易量趋势
     */
    getTendencyData () {
      // 生产当月的开始日期
      const startDate = new Date(moment(new Date()).format('YYYY-MM-DD 00:00:00')).getTime()
      const endDate = new Date(moment(new Date()).format('YYYY-MM-DD 23:59:59')).getTime()
      for (let i = 0; i < 400; i += 1) {
        this.memoryData.rows.push({
          '时间': moment(this.randomDate(startDate, endDate)).format('YYYY-MM-DD HH:mm:ss'),
          '总内存': Math.floor(Math.random() * 10000 + 8000), // 输出8000～12000之间的随机数
          '已使用': Math.floor(Math.random() * 10000 + 5000) // 输出1000～8000之间的随机数
        })
      }
      this.memoryData.rows.sort(function (a, b) {
        return Date.parse(a[ '时间' ]) - Date.parse(b[ '时间' ]) // 时间正序
      })
      this.memoryData.rows.forEach((item) => {
        item['时间'] = moment(item['时间']).format('HH:mm:ss')
      })
    },
    /**
     * 磁盘使用
     */
    getDiskUsageData () {
      // 生产当月的开始日期
      const startDate = new Date(moment(new Date()).format('YYYY-MM-DD 00:00:00')).getTime()
      const endDate = new Date(moment(new Date()).format('YYYY-MM-DD 23:59:59')).getTime()
      for (let i = 0; i < 400; i += 1) {
        this.diskUsageData.rows.push({
          '时间': moment(this.randomDate(startDate, endDate)).format('YYYY-MM-DD HH:mm:ss'),
          '磁盘总量': Math.floor(Math.random() * 100000 + 800000), // 输出8000～12000之间的随机数
          '空间磁盘': Math.floor(Math.random() * 100000 + 700000) // 输出1000～8000之间的随机数
        })
      }
      this.diskUsageData.rows.sort(function (a, b) {
        return Date.parse(a[ '时间' ]) - Date.parse(b[ '时间' ]) // 时间正序
      })
      this.diskUsageData.rows.forEach((item) => {
        item['时间'] = moment(item['时间']).format('HH:mm:ss')
      })
    },
    /**
     * 生成指定时间段的随机时间
     */
    randomDate (startDate, endDate) {
      const date = new Date(+startDate + Math.random() * (endDate - startDate))
      const hour = 0 + Math.random() * (23 - 0) | 0
      const minute = 0 + Math.random() * (59 - 0) | 0
      const second = 0 + Math.random() * (59 - 0) | 0
      date.setHours(hour)
      date.setMinutes(minute)
      date.setSeconds(second)
      return date
    }
  }
}
</script>
<style lang="less" scoped>
  .ant-card{
    /deep/.ant-card-body{
      padding:0 15px 15px 15px;
    }
  }
</style>
